<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/lunbo.css">

    <title>Document</title>
</head>

<body>

    <div class="nav-bar">
        <div id="container">
            <ol class="nav-bar-container">
                <li> <img src="img/7.jpg" alt=""></li>
                <li> <img src="img/8.jpg" alt=""></li>
                <li> <img src="img/9.jpg" alt=""></li>
                <li> <img src="img/1.jpg" alt=""></li>
                <li class="active" style="transform: scale(1.8);"><img src="img/2.jpg"></li>
                <li> <img src="img/3.jpg" alt=""></li>
                <li> <img src="img/4.jpg" alt=""></li>
                <li> <img src="img/5.jpg" alt=""></li>
                <li> <img src="img/6.jpg" alt=""></li>
                <li> <img src="img/7.jpg" alt=""></li>
                <li> <img src="img/8.jpg" alt=""></li>
                <li> <img src="img/9.jpg" alt=""></li>
                <li> <img src="img/1.jpg" alt=""></li>
                <li> <img src="img/2.jpg" alt=""></li>
                <li> <img src="img/3.jpg" alt=""></li>
            </ol>
        </div>
        <div id="left_button" class="mybutton">
            <img src="img/left.png" />
        </div>
        <div id="right_button" class="mybutton">
            <img src="img/right.png" />
        </div>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script>
    var left = 0;
    var index=4;
    $(function () {
        var $list=$("ol li");
        
        $("#right_button").click(function () {
            
            $("ol li:eq("+index+")").addClass("active");
            $("ol li:eq("+(index-1)+")").addClass("active");
            $("ol li:eq("+index+")").css("transform", "scale(1.0)");
            $("ol li:eq("+(index-1)+")").css("transform", "scale(1.8)");

           
            $('.nav-bar-container').animate({
                left: '+=280',
            }, 500, function () {
                $("ol li:eq("+index+")").removeClass("active");
                $("ol li:eq("+(index-1)+")").removeClass("active");
                if (left == '-280px') {
                    $('.nav-bar-container').css("left", "-2520px");
                    $("ol li:eq(10)").css("transform", "scale(1.8)");
                    $("ol li:eq(1)").css("transform", "scale(1.0)");
                }
                left = $('.nav-bar-container').css("left");
                var leftNum=parseInt(left);
                index=leftNum/280;
                if(index<0){
                    index=-index+1;
                }else{
                    index=index+1;
                }
                
                console.log(index);
                
            });
        })
        $("#left_button").click(function () {
            $("ol li:eq("+index+")").addClass("active");
            $("ol li:eq("+(index+1)+")").addClass("active");
            $("ol li:eq("+index+")").css("transform", "scale(1.0)");
            $("ol li:eq("+(index+1)+")").css("transform", "scale(1.8)");
            $('.nav-bar-container').animate({
                left: '-=280',
            }, 500, function () {
                $("ol li:eq("+index+")").removeClass("active");
                $("ol li:eq("+(index+1)+")").removeClass("active");
               
                if (left == "-3080px") {
                    $('.nav-bar-container').css("left", "-840px");
                    $("ol li:eq(4)").css("transform", "scale(1.8)");
                    $("ol li:eq(13)").css("transform", "scale(1.0)");
                }
                left = $('.nav-bar-container').css("left");
                var leftNum=parseInt(left);
                index=leftNum/280;
                if(index<0){
                    index=-index+1;
                }else{
                    index=index+1;
                }
                console.log(index);
            });
        })
    })

</script>

</html>